<template>
	<view class="index-page-box">
		<u-swiper :list="bannerList" keyName="image" height="304rpx" radius="0" :indicator="true" indicatorMode="dot"
			:circular="true"></u-swiper>
		<u-notice-bar :text="noticeList" direction="column" bgColor="#DEF5FF" color="#0095F8"
			@click="$Tips('/pages/noticeList/noticeList')"></u-notice-bar>
		<view class="index-content-box">
			<view class="search-box">
				<image src="@/static/index/search.png" class="search-icon"></image>
				<view class="search-input">
					<u-input placeholder="请输入学校名称" :border="false" v-model="keywords"
						:customStyle="{ height: '104rpx',boxSizing:'border-box'}"
						@input="$u.debounce(getTeacherSchoolList('search'), 500)" />
				</view>
			</view>
			<view class="index-content" :style="{ height: scrollViewHeight + 'px' }">
				<view class="school-list" v-if="showSchoolList&&schoolList.length > 0">
					<view class="school-item" v-for="(item, index) in schoolList" :key="index"
						@click="getSelectSchool(item)">
						<view class="school-logo">
							<image v-if="item.logo" :src="item.logo" mode="aspectFill"></image>
							<image v-else src="@/static/index/school.png" mode="aspectFill"></image>
						</view>
						<view class="school-name">{{ item.title }}</view>
					</view>
				</view>
				<view class="no-data" v-if="showSchoolList&&schoolList.length== 0">
					<image class="no-image" src="@/static/index/no_data.png" mode="aspectFill"></image>
					<view class="no-text" v-if="isLogin">没有找到任何学校</view>
					<view class="no-text" v-else>请先 <text style="color: #0095F8"
							@click="$Tips('/pages/login/login')">登录</text> 后操作</view>
				</view>
				<view class="teacher-course-box" v-if="!showSchoolList">
					<view class="select-box">
						<view class="select-left">
							<image src="@/static/index/selected.png" mode="aspectFill"></image>
							已选择：{{selectSchoolInfo.title}}
						</view>
						<view class="select-right" @click="showSchoolList=true">返回</view>
					</view>
					<view class="course-list" v-if="!showSchoolList&&teacherCourseList.length>0">
						<view class="course-item" v-for="(item, index) in teacherCourseList" :key="index"
							@click="toCourseDetail(item)">
							<image class="item-left" :src="item.pic" mode="aspectFill"></image>
							<view class="item-center">
								<view class="course-name">{{ item.title }}</view>
								<view class="course-desc">课程简介：{{ item.desc || "无" }}</view>
								<view class="course-place">授课地点：{{ item.place }}</view>
							</view>
							<image class="item-right" src="@/static/index/arrow-right.png" mode="aspectFill"></image>
						</view>
					</view>
					<view class="no-data" v-if="!showSchoolList&&teacherCourseList.length== 0">
						<image class="no-image" src="@/static/index/no_data.png" mode="aspectFill"></image>
						<view class="no-text">该学校没有您需要授课的课程</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import USearch from "../../uni_modules/uview-ui/components/u-search/u-search.vue";
	export default {
		components: {
			USearch
		},
		data() {
			return {
				bannerList: [],
				noticeList: [],
				keywords: '', // 搜索关键词
				schoolList: [], // 学校列表
				showSchoolList: true, // 是否显示学校列表
				selectSchoolInfo: {}, // 选择的学校信息
				teacherCourseList: [], // 教师课程列表
				navTop: 0, // 导航栏距离顶部的高度
				windowHeight: 0, // 窗口高度
				scrollViewHeight: 0, // 滚动视图高度
			}
		},
		computed: mapGetters(['isLogin', 'userInfo']),
		onShow() {
			if (this.isLogin) {
				this.getTeacherSchoolList()
			} else {
				this.initPageData()
			}
			this.getBannerList()
			this.getNoticeList()
		},
		onReady() {
			let _self = this
			uni.getSystemInfo({
				success(res) {
					_self.windowHeight = res.windowHeight
					let view = uni.createSelectorQuery().select('.index-content')
					view.boundingClientRect(data => {
						_self.scrollViewHeight = _self.windowHeight - data.top - 10
					}).exec()
				}
			})
		},
		methods: {
			initPageData() {
				this.keywords = '' // 如果未登录，清空搜索关键词
				this.schoolList = [] // 清空学校列表
				this.showSchoolList = true // 显示学校列表
				this.selectSchoolInfo = {} // 清空选择的学校信息
				this.teacherCourseList = [] // 清空教师课程列表
			},
			getBannerList() {
				this.$Api.common.getBannerList().then(res => {
					this.bannerList = res.data || []
				})
			},
			getNoticeList() {
				this.$Api.common.getNoticeList().then(res => {
					this.noticeList = res.data.map(item => item.title) || ['暂无公告内容,可稍后再关注…']
				})
			},
			getTeacherSchoolList(type) {
				if (!this.isLogin) {
					this.keywords = ''
					return this.$Toast('请先登录后操作')
				}
				this.$Api.user.getTeacherSchoolList({
					name: this.keywords,
				}).then(res => {
					this.schoolList = res.data
          if(type === 'search') {
            this.showSchoolList = true // 搜索时显示学校列表
          }
				}).catch(err => {
					this.$Toast(err.message || '获取学校列表失败')
				})
			},
			getSelectSchool(school) {
				this.selectSchoolInfo = school
				this.getSchoolCourseList(school.id)
			},
      // 跳转到课程详情
      toCourseDetail(item) {
        if (!this.isLogin) {
          return this.$Toast('请先登录后操作')
        }else{
          this.$Tips('/pages/courseDetail/courseDetail?courseId='+item.id+'&schoolId='+item.school_id+'&title='+item.title)
        }
      },
			// 获取学校老师课程列表
			getSchoolCourseList(schoolId) {
				this.$Api.user.getSchoolCourseList({
					school_id: schoolId,
				}).then(res => {
					this.teacherCourseList = res.data
					this.showSchoolList = false
				}).catch(err => {
					this.$Toast(err.message || '获取课程列表失败')
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-page-box {
		min-height: 100vh;
		background: #f5f6fa;

		.no-data {
			margin-top: 80rpx;
			text-align: center;

			.no-image {
				width: 402rpx;
				height: 278rpx;
				margin: 0 auto;
			}

			.no-text {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				margin-top: 24rpx;
			}
		}

		.index-content-box {
			padding: 20rpx 32rpx;

			.search-box {
				width: 686rpx;
				height: 104rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
				border-radius: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.search-icon {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}

				.search-input {
					width: 400rpx;
					height: 100%;
				}
			}

			.index-content {
				margin-top: 20rpx;
				overflow-y: auto;

				.school-list {
					width: 100%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.school-item {
						width: 49%;
						height: 108rpx;
						background: #FFFFFF;
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
						border-radius: 24rpx;
						display: flex;
						align-items: center;
						margin-bottom: 20rpx;

						.school-logo {
							width: 64rpx;
							height: 64rpx;
							margin-right: 16rpx;
							margin-left: 24rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.school-name {
							font-weight: 500;
							font-size: 26rpx;
							color: #222222;
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							margin-right: 24rpx;
						}
					}
				}

				.teacher-course-box {
					margin-top: 20rpx;

					.select-box {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.select-left {
							flex: 1;
							display: flex;
							align-items: center;
							font-weight: 500;
							font-size: 28rpx;
							color: #222222;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 20rpx;
							}
						}

						.select-right {
							font-weight: 500;
							font-size: 22rpx;
							color: #0095F8;
							width: 120rpx;
							height: 44rpx;
							line-height: 44rpx;
							text-align: center;
							border-radius: 8rpx;
							border: 1rpx solid #D1D2D4;
						}
					}

					.course-list {
						margin-top: 20rpx;
						display: flex;
						flex-direction: column;

						.course-item {
							background: #FFFFFF;
							box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.01);
							border-radius: 24rpx;
							display: flex;
							align-items: center;
							padding: 20rpx;
							margin-bottom: 20rpx;

							.item-left {
								width: 136rpx;
								height: 136rpx;
								border-radius: 16rpx;
								margin-right: 16rpx;

								image {
									width: 100%;
									height: 100%;
									border-radius: 50%;
								}
							}

							.item-center {
								flex: 1;

								.course-name {
									font-weight: 500;
									font-size: 28rpx;
									color: #222222;
									margin-bottom: 8rpx;
								}

								.course-place,
								.course-desc {
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
									margin-bottom: 8rpx;
								}
							}

							.item-right {
								width: 32rpx;
								height: 32rpx;
							}
						}
					}
				}
			}
		}
	}
</style>